export const map1 = () => {
    return `
    <template>
    <div>
      <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, nextTick, onMounted } from "vue";
  import "echarts";
  /*
  基本数据类型
  引用数据类型（复杂类型） 个人建议 ref初始化变量 
  ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
  ref定义的数据访问的时候要多一个.value
  */
  
  let dataList = [
    {
      name: "城关街道",
      value: [113.8107088, 35.4712497],
    },
    {
      name: "百泉镇",
      value: [113.795698, 35.4919147],
    },
    {
      name: "常村镇",
      value: [113.874372, 35.4956782],
    },
    {
      name: "北云门镇",
      value: [113.7461485, 35.441079],
    },
    {
      name: "薄壁镇",
      value: [113.5174156, 35.4518768],
    },
    {
      name: "高庄乡",
      value: [113.7638632, 35.5620524],
    },
    {
      name: "洪洲乡",
      value: [113.6938631, 35.5435154],
    },
    {
      name: "胡桥街道",
      value: [113.7968256, 35.4541455],
    },
    {
      name: "黄水乡",
      value: [113.6997486, 35.6046011],
    },
    {
      name: "冀屯镇",
      value: [113.6273246, 35.4022835],
    },
    {
      name: "孟庄镇",
      value: [113.8413238, 35.4384611, 33],
    },
    {
      name: "南村镇",
      value: [113.7517609, 35.6803057],
    },
    {
      name: "南寨镇",
      value: [113.7173013, 35.7773932],
    },
    {
      name: "拍石头乡",
      value: [113.813395, 35.6046644],
    },
    {
      name: "沙窑乡",
      value: [113.6623586, 35.7516994],
    },
    {
      name: "上八里镇",
      value: [113.6138788, 35.5452658],
    },
    {
      name: "吴村镇",
      value: [113.515562, 35.3705911],
    },
    {
      name: "西平罗乡",
      value: [113.7293585, 35.7251279],
    },
    {
      name: "峪河镇",
      value: [113.6011711, 35.3705153],
    },
    {
      name: "占城镇",
      value: [113.6976327, 35.3832827],
    },
    {
      name: "张村乡",
      value: [113.9066528, 35.5367755],
    },
    {
      name: "赵固乡",
      value: [113.6880663, 35.4486989],
    },
  ];
  
  var countrys = function(name, color, value) {
    return {
      name: name,
      value: value,
    };
  };
  
  let echartsMapel: any = ref("");
  const echartsMap = (e: any) => (echartsMapel.value = e);
  const init = (china) => {
    // 基于准备好的dom，初始化echarts实例
  
    var countryData = [];
    var names = [];
    china.features.forEach((res) => {
      countryData.push(countrys(res.properties.name, "#ff5428", 10));
      names.push(res.properties.name);
    });
    console.log(names);
    echarts.registerMap("新乡辉县", china as any);
    var myChart = echarts.init(echartsMapel.value);
    // 指定图表的配置项和数据
    var options: any = {
      geo: {
        map: "新乡辉县",
        zoom: 1,
        show: true,
        roam: true,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
      },
      series: [
        {
          name: "",
          type: "map",
          geoIndex: 2,
          map: "新乡辉县",
          mapType: "world",
          //    layoutCenter: ["50%", "50%"], //地图位置
          //    layoutSize: "160%",
          roam: true,
          itemStyle: {
            borderColor: "#fff",
            areaColor: "#ff5428",
          },
  
          label: {
            show: true,
            formatter: function(params) {
              return params.data.name;
            },
            color: "#fff",
            fontSize: 10,
          },
          select: {
            itemStyle: {
              areaColor: "#7f1100",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          emphasis: {
            itemStyle: {
              areaColor: "#7f1100",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          data: countryData,
        },
        {
          label: {
            normal: {
              position: "left",
              color: "#FFF",
              show: false, //是否显示地名
              formatter: function(params) {
                return params.name;
              },
            },
            emphasis: {
              show: true,
            },
          },
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "fill", //波纹绘制方式 stroke, fill
            scale: 6, //波纹圆环最大限制，值越大波纹越大
          },
          symbol: "circle",
          symbolSize: 4,
          symbolSize: function(val) {
            return val[2] / 3;
          },
          itemStyle: {},
          color: "#FFD768",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: dataList.map((res) => {
            res.value.push(22);
            return res;
          }),
        },
      ],
  
      tooltip: {
        trigger: "item",
      },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(options);
  };
  const state = reactive({});
  onMounted(() => {
    fetch("/vue.example/echarts/hui_xian.json")
      .then(function(response) {
        //response.status表示响应的http状态码
        if (response.status === 200) {
          // json是返回的response提供的一个方法,
          // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
          return response.json();
          //
        } else {
          return {};
        }
      })
      .then(function(data) {
        //响应的内容
        init(data);
        // 响应数据格式化
      });
  });
  </script>
  
  <style scoped>
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184f;
  }
  </style>
  
    `;
  };
  